<template>
	<view class="container">
		<template v-for="(item,index) in IndexBoxs">
			<view class="box-flex">
				<view class="index-box" @click="goPage(index)">
					<span>{{item.txt}}</span>
				</view>
				<image :src="item.img" mode="widthFix" class="index-image"></image>
			</view>

		</template>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				IndexBoxs: [{
						txt: '常用运动',
						img: '../../static/image/sportMan.png'
					},
					{
						txt: '健身知识',
						img: '../../static/image/book.png'
					},
					{
						txt: '健身课程',
						img: '../../static/image/course.png'
					}
				]
			}
		},

		methods: {
			goPage(index) {
				switch (index) {
					case 0:
						this.$go2Page('commonSport')
						break
					case 1:
						this.$go2Page('sportKG')
						break
					case 2:
						this.$go2Page('course')
						break
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/styles/common.scss';

	.index-box {
		display: inline-grid;
		width: 300rpx;
		height: 200rpx;
		border: 1px solid white;
		border-radius: 15rpx;
		background-color: #483D8B;

		span {
			place-self: center;
		}
	}

	.box-flex {
		display: flex;
		justify-content: space-evenly;
		margin-bottom: 80rpx;
		align-items: center;
	}

	.index-image {
		width: 200rpx;
	}
</style>